<html>
<head>
	<meta charset="utf-8">
	<title>vue 计算属性和方法的区别</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="example">
	  <h1>-----处理用户输入-绑定数据-----</h1>
	  <input v-model="message">
	  
	  <span>Original message: "{{ message }}"</span>
	  
	  <h1>-------(computed用法)计算属性--------------------------------</h1>
	  </span>Computed reversed message: "{{reversedMessage }}"</span>
	  
	  <h1> 计算属性返回对象</h1>
	  <span> {{classTest}}</span>
	  <br>
	  <span>computed的时间: "{{now}}"</span>
	  
	  <h1>------method用法------</h1>
		<span> {{reversedMessageB()}}</span>
		<span>method的时间：{{showNow()}}</span>
	   <br>

	   <button v-on:click="changeMessage">改变Message</button>
	   <button v-on:click="showNow">尝试更新时间</button>

	</div>
	
	<script type="text/javascript">
		// data ,computed,methods 用法
		var vm = new Vue({
		  el: '#example',
		  data: {
		    message: 'Hello'
		  },

		  computed: {
		    reversedMessage: function () {
		      // `this` 指向 vm 实例
		      alert("computed--"+this.message)
		      return this.message.split('').reverse().join('')
		    },
		    classTest:function(){
		    	return{
		    		a:"appale",
		    		b:"orange",
		    		c:"pineapple",
		    		d:'banana'
		    	}
		    },

		    now: function () {
		     	// console.log(this.message);
			    return Date.now()
			 }
		  },

		  methods: {
		  	reversedMessageB: function () {
		  		 alert("methods--"+this.message)
		    	return this.message.split('').reverse().join('')
		  	},
		  	changeMessage:function(){
		  		this.message="GoodBye"
		  	},
		  	showNow:function(){
			    return Date.now()
		  	},
		  	
		  },
		})

		
	</script>
<style type="text/css">
	p{
		color: red;
	}
</style>
</body>
</html>